<?php

use yii\helpers\Html;
use yii\bootstrap\ActiveForm;

$this->title = '会员登录';
$this->params['breadcrumbs'][] = $this->title;
?>

		
<style type="text/css">
	body{background: url(/img/bg_login.png)  top center no-repeat;
		width:100%;
		height:100%;
		background-attachment: fixed;
  		-webkit-background-size: cover;
  		-moz-background-size: cover;
  		-o-background-size: cover;
  		background-size: cover;
	}
	.text-center{text-align: center;}
	.mui-icon{font-size: 30px}
	.mui-bar-transparent{top:0;background-color:rgba(247,247,247,0);-webkit-box-shadow:none;box-shadow:none}
	.mui-btn-block{padding: 10px 0px;height: 46px;margin-top:20px;}
	.menu-list{color: #FFF;margin-top: 40px;}
	.menu-list .mui-icon{font-size: 20px;}

	.link-area{margin:15px;}
	.text-center{text-align: center;}
	.mui-input-group .mui-input-row:after{left: 0}
	.mui-bar-transparent{top:0;background-color:rgba(247,247,247,0);-webkit-box-shadow:none;box-shadow:none}
	#login-form{margin-top: 30px;}
    .mui-btn-pink{background-color:#00A1A7;border:1px solid #00A1A7;color: #FFFFFF; }
    .mui-input-group:before{background-color: transparent;}
    .mui-input-group:after{background-color: #FFFFFF;height: 0px;}
    .lab1{color: #FFFFFF;padding:10px;width: 10% !important;padding: 8px 15px !important;text-align: center;}
    .icon3{font-size: 1.6rem;}
    .input1{color: #FFFFFF !important;background-color:#2b3347 !important;width: 85% !important;text-align: center;}
    .input2{color: #FFFFFF !important;width: 100% !important;text-align: center;}
    .labe2{width: 38% !important;display: inline-block;}
    .mui-input-group input:after{background-color: #2b3347;height: 0px;}
	.mui-btn-primary{background-color: transparent;border:1px solid transparent;text-decoration: underline;}
</style>
<div class="mui-content">
		<div class="mui-scroll">
      <input type="hidden" name="_csrf" id="_csrf" value="<?=\Yii::$app->getRequest()->getCsrfToken()?>">
			<div class="mui-row" style="margin-top: 90%;width: 90%;margin-left: 5%;">
				
						
							<div class="mui-input-group mui-input-row" style="background-color: #2b3347;border-top: 0;border:1px solid #2b3347;border-radius: 4px;"> 
								  <label class="lab1"><i class="iconfont icon3">&#xe801;</i></label>
        						  <input type="number" name="login-form[phone]" id="member-phone" class="input1"  placeholder="请输入手机号" >
							</div>


							<div class="mui-input-group mui-row" style="margin-top: 20px;">
		                        <div class="mui-col-xs-6" style="width: 70%;height: 46px;background-color: #2b3347;border:1px solid #2b3347;border-radius: 4px;">
		                            <input type="tel" id="member-code" name="login-form[code]" disabled="disabled" placeholder="请输入验证码" class="input2" style="padding-left:0;">   
		                        </div>
		                        <div class="mui-col-xs-6" style="width: 30%;line-height: 38px;">
		                            <a  class="mui-btn mui-btn-primary" id="getCode" style="float: none;width: 90%;padding:6px 12px;vertical-align: middle;height: 46px;line-height: 30px;margin-left:10%;">获取验证码</a>
		                        </div>
		          </div>  
		           
              <div style="clear:both;"></div>   

		          <div class="mui-row">
								<?= Html::submitButton('登 录' , ['class'=>'mui-btn mui-btn-block mui-btn-pink','id'=>'login-form']) ?>
							</div>
				
			</div>	
			
			
		</div>
</div>


<?php app\components\JsBlock::begin() ?>
<script type="text/javascript">

var phone = $.trim(localStorage.getItem("phone"));
var _csrf = $("#_csrf").val();
 if(phone.length != 0){
  $.ajax({
       type: "post",
       async:false, 
       url: "/sign/member/auto-login",
       data: {'phone':phone,'_csrf':_csrf},
       success: function(res){
            var res = $.parseJSON(res);
            if(res.code == 0){
              return false;
            }else if(res.code == 1){
              window.location.href='/sign/sign/index';  
            }
       }
  });
 }

mui.init();
mui('body').on('tap','a[data-link="as"]',function(){document.location.href=this.href;});

function isPhoneNo(phone) { 
 var pattern = /^1[3|4|5|7|8][0-9]\d{4,8}$/; 
 return pattern.test(phone); 
}

var wait=30;
function time(o) {
         if (wait == 0) {
            o.removeClass("mui-disabled");          
            o.text("获取验证码");
            wait = 30;
        } else {
            o.addClass("mui-disabled");
            o.text("重新发送(" + wait + ")");
            wait--;
            setTimeout(function() {
                time(o)
            },
            1000)
        }
}

mui('body').on('tap',"#getCode",function(){
	document.activeElement.blur();
	if($(this).hasClass('mui-disabled')){
        return false;
    }
    var _self = $(this);

	var phone = $.trim($("#member-phone").val());
	if(phone.length == 0){
		mui.toast('手机号不能为空！');
		return false;
	}

	if(isPhoneNo(phone) == false){
		mui.toast('手机号错误！');
		return false;
	}
	var msg_r = 0;
	//检测手机号是否存在
	$.ajax({
       type: "get",
       async:false, 
       url: "/sign/member/check",
       data: {phone:phone},
       success: function(res){
       	    if(res == 0){
       	    	mui.toast('该账号不存在!');
       	    	return ;
       	    }else if(res == 1){
       	    	msg_r = 1;
       	    }
       }
    });
	//发送验证码
	if(msg_r){
		$.ajax({
	       type: "get",
	       async:false, 
	       url: "/sign/member/code",
	       data: {phone:phone},
	       success: function(msg){
	       	   if(msg == "Success"){
                    mui.toast("发送成功, 请注意查收");
                    $("#member-code").removeAttr("disabled");
                    time(_self);        
                }else{
                    mui.toast("发送失败, 稍后重试");
                }
	       }
	    });
	}


});
mui('body').on('tap',"#login-form",function(){
	document.activeElement.blur();
	var phone = $.trim($("#member-phone").val());
  var code = $.trim($("#member-code").val());

    if(phone.length == 0){
        mui.toast('手机号不能为空');
        return false;
    }
    if(code.length == 0){
        mui.toast('验证码不能为空');
        return false;
    }
     
   	$.ajax({
           type:"get",
           async:false, 
           url: "/sign/member/verify",
           data: {phone:phone,code:code},
           success: function(res){
           	    var res = $.parseJSON(res);
                if(res.code == 0){
                	mui.toast(res.msg);
                	return false;
                }else if(res.code == 1){
                	mui.toast(res.msg);
                  localStorage.setItem('phone',phone);
					        window.location.href='/sign/sign/index'; 
                }
           }
    });

});

</script>
<?php app\components\JsBlock::end() ?>		
